<template>
  <div class="menu">
    <div class="menu-left" @mouseleave.stop="mouseleaveHandler">
      <template v-for="(item, index) in menu">
        <div
          class="left-item-wrap"
          :key="index"
          v-if="
            (item.meta && item.meta.roles && item.meta.roles.includes(userInfo.userType)) ||
            !item.meta.roles
          "
        >
       
          <div
            class="left-item"
            :class="{ active: index == selectIndex }"
            @click.stop="gotoMenuL1(item, index, 'click')"
            @mouseenter.stop="gotoMenuL1(item, index, 'mouseenter')"
          >
            <!-- v-if="item.hidden" -->
            <img :src="index == selectIndex ? item.meta.activeIcon : item.meta.icon" />
            {{ item.meta.title }} 
          </div>
          <div
            class="menu-right2"
            v-if="collapsed && rightMenuMaskShow && rightMenuMaskAcitveIndex == index"
          >
            <div v-for="(item2, index2) in selectMenu" :key="index2">
              <div class="right-item second" v-if="index2 != 0"></div>
              <div v-for="(temp, tempIndex) in item2.children" :key="tempIndex">
                <!-- v-if="!temp.hidden" -->
                <template
                  v-if="
                    (temp.meta && temp.meta.roles && temp.meta.roles.includes(userInfo.userType)) ||
                    !temp.meta.roles
                  "
                >
                  <div
                    class="right-item three"
                    :class="temp.name == level2Index ? 'active' : ''"
                    @click.stop="gotoMenuL3(temp, tempIndex, index)"
                  >
                    {{ temp.meta.title }}
                  </div>
                </template>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
    <div class="menu-right" v-if="!collapsed && selectMenu.length > 0">
      <div v-for="(item, index) in selectMenu" :key="index">
        <div class="right-item second" v-if="index != 0"></div>
        <!-- <div class="right-item second">
          {{ item.meta.title }}
        </div> -->
        <div v-for="(temp, tempIndex) in item.children" :key="tempIndex">
          <!-- <div class="right-item second" v-if="index != 0"></div> -->
          <template
            v-if="
              (temp.meta && temp.meta.roles && temp.meta.roles.includes(userInfo.userType)) ||
              !temp.meta.roles
            "
          >
            <div
              style="overflow: hidden"
              class="right-item three"
              v-if="!temp.hidden"
              :class="temp.name == level2Index ? 'active' : ''"
              @click="gotoMenuL3(temp, tempIndex, index)"
            >
              {{ temp.meta.title }}
            </div>
          </template>
        </div>
      </div>
    </div>
    <!-- <div class="menu-right2" v-if="collapsed && rightMenuMaskShow">
      <div v-for="(temp, index) in selectMenu" :key="index">
        <div class="right-item second" v-if="index != 0"></div>
        <div class="right-item second">
          {{ item.meta.title }}
        </div>
        <div v-for="(temp, tempIndex) in item.children" :key="tempIndex">
        <div
          class="right-item three"
          v-if="!temp.hidden"
          :class="temp.name == level2Index ? 'active' : ''"
          @click="gotoMenuL3(temp, tempIndex, index)"
        >
          {{ temp.meta.title }}
        </div>
        </div>
      </div>
    </div> -->
    <img
      :src="require(`../../assets/open-${collapsed ? 'right' : 'left'}.png`)"
      class="open-btn"
      @click="toggle"
    />
  </div>
</template>

<script>
import storage from 'store'
import { mapState } from 'vuex'
export default {
  name: 'SideMenu',
  data() {
    return {
      selectMenu: [],
      selectIndex: 0,
      childIndex: null,
      level2Index: 0,
      menuRightShow: false,
      rightMenuMaskAcitveIndex: 0
    }
  },
  props: {
    collapsed: {
      type: Boolean,
      required: false,
      default: false
    },
    menu: {
      type: Array,
      default() {
        return []
      }
    },
    rightMenuMaskShow: {
      type: Boolean,
      required: false,
      default: false
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.info
    })
  },
  mounted() {
    console.log(this.menu, 'menumenu')

    this.updateMenu()
  },
  methods: {
    mouseleaveHandler() {
      if (this.collapsed && this.rightMenuMaskShow) {
        this.rightMenuMaskAcitveIndex = null
      }
    },
    
    hiddenMenu() {
      this.selectMenu = []
      this.rightMenuMaskAcitveIndex = 0
    },
    gotoMenuL1(info, index, type) {
      if (!this.collapsed && type == 'mouseenter') {
        return
      }

      // 第一级菜单跳转
      if (index !== this.selectIndex) {
        this.selectIndex = index
      }
      if (info.children && info.children.length >= 1) {
        this.rightMenuMaskAcitveIndex = index
        this.selectMenu = info.children
      } else {
        this.selectMenu = []
        this.$router.push({
          path: info.path
        })
      }
      this.$emit('select', this.selectMenu.length)
    },
    gotoMenuL3(info, childIndex, index) {
      // 第三级菜单跳转
      this.childIndex = childIndex
      this.level2Index = info.name
      storage.set('l1Index', this.selectIndex)
      storage.set('l2Index', this.level2Index)
      storage.set('l3Index', this.childIndex)
      this.$router.push({
        path: info.path
      })
      this.$emit('l3Select')
    },
    updateMenu() {
      const vm = this
      this.menu.forEach((item, index) => {
        if (vm.$route.name == item.name) {
          vm.selectIndex = index
          vm.selectMenu = []
        }
        item.children &&
          item.children.length > 0 &&
          item.children.forEach((item2, index2) => {
            item2.children &&
              item2.children.length > 0 &&
              item2.children.forEach((item3, index3) => {
                if (vm.$route.name == item3.name) {
                  vm.selectIndex = index
                  vm.selectMenu = item.children
                  vm.level2Index = item3.name
                  vm.childIndex = index3
                }
              })
          })
      })
      // vm.$emit('select', vm.selectMenu.length)
      console.log(vm.$route.name, 'toute')
    },
    toggle() {
      this.$emit('toggle')
    }
  },
  watch: {
    $route: function () {
     this.updateMenu()
    }
  }
}
</script>
<style lang="less" scoped>
.menu {
  display: flex;
  min-height: 100%;
  .left-item-wrap {
    position: relative;
  }
  // border-top: 1px solid #e8e8e8 !important;
  .menu-left {
    width: 80px;
    .left-item {
      width: 56px;
      height: 64px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #333;
      cursor: pointer;
      margin: 15px 12px;
      img {
        width: 22px;
        height: 22px;
        margin-bottom: 5px;
      }
    }
    .left-item.active {
      background: #f2f6ff;
      color: #4393f2;
    }
    .left-item:hover {
      background: #f2f6ff;
    }
    .left-item.close {
      background-repeat: no-repeat;
      background-position: top;
      background-size: 19px 19px;
    }
  }
  .menu-right,
  .menu-right2 {
    width: 120px;
    border-left: 1px solid rgba(228, 228, 228, 0.5);
    .right-item {
      min-width: 98px;
      height: 40px;
      line-height: 40px;
      border-radius: 2px;
      text-align: left;
      margin: 10px;
    }
    .right-item.three {
      min-width: 100px;
      // overflow: hidden;
      // text-overflow: ellipsis;
      // white-space: nowrap;
    }

    .right-item.three.active {
      color: #4393f2;
      // color: #fff;
    }
    .right-item.second {
      height: 1px;
      background: #ccc;
      color: #333;
      font-size: 16px;
    }
    .right-item.three {
      color: #666;
      cursor: pointer;
      font-size: 14px;
    }
  }
  .menu-right2 {
    position: absolute;
    top: 10px;
    left: 78px;
    z-index: 99999;
    background: #fff;
    border: none;
    min-width: 140px;
    box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    // .three{
    //   text-align: center;
    // }
  }
  .open-btn {
    position: absolute;
    top: calc(50vh - 15px);
    right: -10px;
    width: 10px;
    height: 30px;
    z-index: 9999;
    cursor: pointer;
  }
}
.menu {
  transition: all 0.2s linear 0s;
}

/* 1.过渡动画 */
// @keyframes axisX {
//   from {
//      transform: scaleY(100);
//   }
//   to {
//      transform: scaleY(0);
//   }
// }
// /* 2. 过渡类名 */
// /* 开始 */
// .fade-enter-active {
//   animation: axisX .3s;
// }
// /* 结束 */
// .fade-leave-active {
//   animation: axisX .3s ;
// }
</style>
